<template>
  <div class="phone-frame">
    <van-nav-bar
        title="地址管理"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="address-header">
    </div>
    <div class="address-info">
      <p>{{ contactName }} {{ contactNumber }}</p>
      <p>{{ address }}</p>
    </div>
    <div v-if="isEditing" class="edit-modal">
      <!-- 这里可以添加编辑地址的表单 -->
      <h3>编辑地址</h3>
      <button @click="isEditing = false">取消</button>
      <button @click="saveAddress">保存</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      currentTime: '12:00',
      contactName: '张先生',
      contactNumber: '18000000000',
      address: '湖北省襄阳市襄城区',
      isEditing: false
      // 假设有更多数据和逻辑配置
    };
  },
  methods: {
    showPasswordModal() {
      this.passwordModalVisible = true;
    },
    importWechatAddress() {
      // 这里添加导入微信地址的逻辑
      alert('导入微信地址功能');
    },
    onClickLeft() {
      this.$router.push('/geren')
    },
    addNewAddress() {
      // 这里添加添加新地址的逻辑
      alert('添加新的收货地址功能');
    },
    saveAddress() {
      // 这里添加保存编辑后地址的逻辑
      this.isEditing = false;
    },
    savePassword() {
      const form = {
        userId: this.leaders.userId,
        oldPassword: this.oldPassword,
        newPassword: this.newPassword,
        confirmPassword: this.confirmPassword
      };
      // 这里可以添加保存密码的逻辑
      axios.post("http://1.94.221.254:9999/leaders/leaders/updatePassword",form).then(res=>{
        if(res.data.code===200){
          this.$message.success(res.data.data)
        }else{
          this.$message.error(res.data.data)
        }
      })
      this.passwordModalVisible = false;
    },
    goToAddressPage() {
      // 这里可以使用路由进行页面跳转
      // 假设你使用了 Vue Router，并且有一个名为 AddressPage 的路由组件
      this.$router.push('/address');
    },
    logout() {
      // 退出登录逻辑
      alert('确定退出吗？')
      this.$router.push('/');
      console.log('退出登录');
    },
    handle(){

      this.$router.push('/wode')
    },
    handleClick(){
      this.$router.push('/tuanzhang')
    },
    geren(){
      this.$router.push('/fenlei')
    },
    shouye() {
      this.$router.push('/shouye')
    },
    fenlei() {
      this.$router.push('/fenlei')
    },
    mendian() {
      this.$router.push('/mendian')
    },
    wode() {
      this.$router.push('/wode')
    },
    findList(){
      axios.get("http://1.94.221.254:9999/leaders/leaders/findList").then(res=>{
        this.leaders = res.data.data
      })
    },
  },
  created(){
    this.findList();
  }
};
</script>

<style scoped>
.header {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
}

.profile-info {
  display: flex;
  align-items: center;
  padding: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.username {
  font-size: 18px;
  margin-left: 10px;
}
.icon-size {
  margin-right: 5px;
  font-size: 16px;
}
.membership .el-card__header {
  display: flex;
  justify-content: space-between;
}

.order-status,
.wallet-info,
.features {
  text-align: center;
  margin: 10px 0;
}

.ad-banner {
  width: 100%;
  object-fit: cover;
}

body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-picture {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #ddd;
}

.profile-info {
  margin-left: 20px;
}

.profile-info h2 {
  margin: 0;
}

.profile-section {
  margin-bottom: 20px;
}

.profile-section h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.profile-section input[type="text"],
.profile-section select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.btn:hover {
  background-color: #0056b3;
}
</style>